<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<script src=-.js></script>
<script>
  class Themed extends $ {
    get cssImports() {
      return ['theme.css'];
    }
  }
</script>
<script>
  // example 1
  class Cool extends $(Themed) {
    static get attrs() {
      return ['max'];
    }

    showAlert(event) {
      console.log('event', event);
      alert('got an event');
    }

    showPos(mouseMove) {
      const {clientX,clientY} = mouseMove;
      console.log({clientX,clientY});
    }

    styles() {
      return `
        progress {
          background-color: #e6f7ff; /* Light blue background for progress */
        }

        p {
          color: #32a852; /* A shade of green for paragraph text */
        }
      `;
    }

    template() {
      return `
        <progress value=${myProgress} max=${host.max} onclick="showAlert(event);"></progress>
        <p onpointermove="showPos">${myWords}</p>
      `;
    }
  }
</script>
<script> 
  // example 2
  class Button extends Themed.$ {
    constructor() {
      super();
      const target = document.querySelector('cool-el');

      let state;

      if ( target ) {
        const originalCount = target?.state?.myProgress;
        state = {
          count: originalCount,
          target
        }
      } else {
        state = { count: 0 };
      }

      this.state = state;
    }

    changeState() {
      const {state} = this;

      if ( ! state.target ) {
        state.target = querySelector(this, 'cool-el');
      }

      state.count++; 

      if ( state.count > state.target.max ) {
        state.count = 0;
      }

      state.target.state = Object.assign(state.target.state, {
        myProgress: state.count
      });

      this.state = state;
    }

    styles() {
      return `
        button {
          background-color: #3399FF; /* Bright blue */
          color: #fff; /* White text */
        }
        button:hover {
          background-color: #287bc0; /* Darker blue on hover */
        }
      `;
    }

    template() {
      return `
        <button onclick=changeState>You Have Clicked Me ${count} Times</button>
      `;
    }
  }
</script>
<script>
  class App extends Themed {
    styles() {
      return `
        h1 {
          color: #22DD22; /* Bright green */
        }
        ul {
          padding-left: 20px;
        }
      `;
    }

    template() {
      return `
        <h1>Embedded Example</h1>
        <cool-el max=25 state='{"myProgress":10,"myWords":"hi i am world"}'/>
        <button-el />
        <h1>Other examples</h1>
        <ul>
          <li><a href=examples/greeting.html>Greeting</a>
          <li><a href=examples/todomvc.html>TodoMVC</a>
          <li><a href=examples/7guis.html>7 GUIs</a>
        </ul>
        <h1>Interesting bugs discovered because of Hyphen</h1>
        <p><i>Note: these are minimum reproducible examples, they may not contain any Hyphen code.</i></p>
        <ul>
          <li><a href=bug-examples/safari-bug-nov-8-2023/index.html>Safari Bug 11/08/2023 🐜</a>
          <li><a href=bug-examples/safari-bug-nov-8-2023-variant-2/index.html>Safari Bug 11/08/2023 🐜 (no shadow DOM)</a>
        </ul>
      `;
    }
  }

  const app = App.new();

  document.addEventListener('DOMContentLoaded', () => {
    customElements.upgrade(app);
    document.body.appendChild(app);
  });
</script>
